<template>
	<view class="page">
		<view class="tab-box">
			<u-tabs :current="tabIndex" :list="tabList" :activeStyle="{color:'#276AEE',fontWeight: 600}" lineColor="#276AEE"
				lineWidth="48rpx" lineHeight="4rpx" :inactiveStyle="{color:'#1D2129',fontWeight: 600}"
				:itemStyle="{ height: '40px',padding:'0 32rpx' }" @click="(e)=>tabChange(e.index)"></u-tabs>
		</view>

		<view class="modules">
			<template v-for="(item,index) in items">
				<template v-if="index===0||(index>0&&item._createTime!==items[index-1]._createTime)">
					<text class="time-line">{{item._createTime}}</text>
				</template>
				<view :key="item.id" class="module" @tap="previewImage(item.path)"
					@longpress.stop.prevent="deleteHandle(item,index)">
					<view class="module-main">
						<u-image width="224rpx" height="224rpx" :src="item.path"></u-image>
						<view class="module-main__info">
							<u-icon name="account" color="#FFFFFF" size="26rpx"></u-icon>
							<text class="module-main__info-name">{{item.createByName}}</text>
							<text class="module-main__info-time">{{item.createTime.substr(11,5)}}</text>
						</view>
					</view>
					<view class="module-remark textHide-1">{{item.context}}</view>
				</view>
			</template>

			<view v-if="loadMoreStatus!=='nomore'&&items.length" class="module" @tap="scrolltolower">
				<view class="module-main module-main__more bg-hover">
					<text v-if="loadMoreStatus==='loadmore'">点击加载更多</text>
					<u-loading-icon v-if="loadMoreStatus==='loading'" text="加载中" textSize="28rpx"></u-loading-icon>
				</view>
			</view>
		</view>

		<template v-if="loadMoreStatus!=='loading'&&!items.length">
			<u-empty marginTop="10vh" width="240rpx" height="240rpx" text="暂时没有群相册" textSize="28rpx" textColor="#86909C"
				icon="https://file.casugn.com/storecompcard/temp/空页面@2x(13)_1681113762268.png"></u-empty>
		</template>

		<template v-if="loadMoreStatus==='loading'&&!items.length">
			<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus" @loadmore="scrolltolower" />
		</template>

		<cus-add-btn :safeAreaInsetBottom="true" :right="scrollDirect===-1?'40rpx':'-100rpx'"
			@click="addHandle"></cus-add-btn>

		<add-photo ref="AddPhoto" :albumId="albumInfo.id" @refresh="refresherrefresh"></add-photo>
	</view>
</template>

<script>
	import AddPhoto from './components/add-photo.vue'
	import commonJS from '@/common/libs/common.js'

	export default {
		components: { AddPhoto },
		data() {
			return {
				tabList: [{
						name: '相册',
						value: 0,
					},
					{
						name: '我的',
						value: 1,
					},
				],
				tabIndex: 0,

				albumInfo: {},
				openId: '',

				items: [],
				pageNo: 1,
				pageSize: 20,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore

				scrollTop: 0,
				scrollDirect: -1, // 向上1 向下-1
			}
		},
		computed: {
			imgList() {
				return this.items.map(it => it.path)
			},
		},
		async onLoad(option) {
			this.albumInfo.groupId = option.groupId
			this.openId = await this.getOpenId()

			this.loadMoreStatus = 'loading'
			await this.queryAlbumByGroupId()
			this.getDBData()
		},
		onPullDownRefresh() {
			this.refresherrefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		onPageScroll(e) {
			this.scrollDirect = e.scrollTop - this.scrollTop > 0 ? 1 : -1
			this.scrollTop = e.scrollTop
		},
		onShareAppMessage() {
			return {
				title: `${this.albumInfo.name||''}分享`,
				path: '/pagesCard/quickGroupShare/quickGroupShare?albumId=' + this.albumInfo.id
			}
		},
		methods: {
			tabChange(e) {
				this.tabIndex = e
				this.refresherrefresh()
			},
			//根据groupId 查询对应的群相册
			async queryAlbumByGroupId() {
				let res = await this.$api.queryAlbumByGroupId(this.albumInfo.groupId)
				if (res.success) {
					this.albumInfo = res.result
				}
			},
			addHandle() {
				this.$refs.AddPhoto.show()
			},
			deleteHandle(item, index) {
				const that = this
				if (item.createBy == this.openId) {
					uni.showModal({
						content: '确认删除照片？',
						success: async (e) => {
							if (e.confirm) {
								console.log('用户点击确定');
								let res = await that.$api.deleteGroupPhotoById(item.id)
								if (res.success) {
									uni.showToast({ title: '删除成功', icon: 'none' });
									that.items.splice(index, 1)
								}
							} else if (e.cancel) {
								console.log('用户点击取消');
							}
						}

					})
				}
			},
			// 预览图片
			previewImage(current) {
				uni.previewImage({ // 预览图片  图片路径必须是一个数组
					current: current,
					urls: this.imgList
				});
			},
			getOpenId() {
				const that = this
				return new Promise(async (resolve, reject) => {
					if (that.$store.getters.openId) {
						resolve(that.$store.getters.openId)
					} else {
						let res = await that.$store.dispatch('getOpenId')
						resolve(res.openid || '')
					}
				});
			},
			async getDBData(type = 'refresh') {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					albumId: this.albumInfo.id,
					createBy: this.tabIndex === 0 ? '' : this.openId,
				}
				let res = await this.$api.getQuickGroupPictures(params)
				if (res.success) {
					let tData = res.result.records.map(item => {
						item._createTime = commonJS.formatTimestamp(
							new Date(item.createTime.replace(/-/g, '/')),
							'yyyy年MM月dd日'
						)
						return item
					})
					if (type === 'refresh') {
						this.items = tData
					}
					if (type === 'add') {
						this.items.push(...tData)
					}
					console.log('群相册列表：', this.items);
					this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.loadMoreStatus = 'loading'
				this.items = []
				this.pageNo = 1
				setTimeout(async () => {
					await this.getDBData('refresh')
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.page {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tab-box {
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 9;
	}

	.modules {
		padding: 0 14rpx 0 16rpx;

		display: flex;
		flex-wrap: wrap;

		.time-line {
			width: 100%;
			margin-top: 24rpx;
			margin-left: -16rpx;
			margin-right: -14rpx;
			padding: 0 8rpx;
			font-size: 24rpx;
			color: #86909C;
			line-height: 34rpx;


			position: sticky;
			top: 40px;
			background-color: #F7F8FA;
			z-index: 9;
		}

		.module {
			width: 224rpx;
			margin-top: 24rpx;
			padding: 0 8rpx 6rpx;
			box-sizing: content-box;

			.module-main {
				position: relative;
				width: 224rpx;
				height: 224rpx;

				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					z-index: 1;
				}

				.module-main__info {
					position: absolute;
					bottom: 0;
					width: 100%;
					// height: 44rpx;
					padding: 8rpx 16rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 28rpx;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
					box-sizing: border-box;

					display: flex;
					align-items: center;

					.module-main__info-name {
						margin-left: 4rpx;
					}

					.module-main__info-time {
						margin-left: auto;
						padding-left: 10rpx;
					}
				}

				&.module-main__more {
					font-size: 24rpx;
					color: #86909C;
					line-height: 34rpx;
					background-color: #fff;

					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.module-remark {
				margin-top: 16rpx;
				font-size: 20rpx;
				color: #000000;
				line-height: 28rpx;
			}
		}
	}

	.add-box {
		transition: transform 0.5s;
		transform: translateX(0);

		&.add-hide {
			transform: translateX(160rpx);
		}
	}
</style>